import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_syt/generated/l10n.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';

import 'video_background.dart';
// KeyboardVisibilityController().onChange.listen((bool visible) {
//       print('Keyboard visibility update. Is visible: $visible');
//       if (visible == false) {
//         _formKey.currentState?.save();
//         checkInputCanNext();
//       }
//     });

class LoginContainer extends StatefulWidget {
  final Widget child;
  final Widget? welcomeWidget;
  final Widget? bottom;

  LoginContainer({
    Key? key,
    required this.child,
    this.bottom,
    this.welcomeWidget,
  }) : super(key: key);
  @override
  LoginContainerState createState() => LoginContainerState();
}

class LoginContainerState extends State<LoginContainer> {
  bool blurBackground = false;
  late StreamSubscription _subscription;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // _getBackground(),
        // VideoBackground(),
        _getBackgroundColor(),

        Positioned.fill(
            child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: 45.0 + ScreenUtil().statusBarHeight,
              ),
              _logoWidget(),
              SizedBox(
                height: 10.0,
              ),
              widget.welcomeWidget != null
                  ? widget.welcomeWidget
                  : _welcomeWidget(context),
              SizedBox(
                height: 24.0,
              ),
              Container(
                // color: Colors.red,
                // margin: EdgeInsets.only(top: 800),
                child: widget.child,
              ),
              // Container(
              //   height: 800,
              //   color: Colors.red,
              // ),
              Container(
                child: widget.bottom,
              ),
            ],
          ),
        )),
        Positioned(
          top: ScreenUtil().statusBarHeight + 4,
          left: 16,
          child: Container(
            width: 36,
            height: 36,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: ThemeColor.colorBlack30,
              shape: BoxShape.circle,
            ),
            child: IconButton(
              icon: Icon(
                Icons.arrow_back_ios_new,
                color: Colors.white,
                size: 16,
              ),
              onPressed: ClickUtils.debounce(() {
                Navigator.of(context).pop();
              }),
            ),
          ),
        ),
        // Container(
        //   alignment: Alignment.topLeft,
        //   padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
        //   child: Column(
        //     crossAxisAlignment: CrossAxisAlignment.start,
        //     children: <Widget>[
        //       Container(
        //         child: Column(
        //           children: [
        //             SizedBox(
        //               height: 45.0,
        //             ),
        //             _logoWidget(),
        //             SizedBox(
        //               height: 10.0,
        //             ),
        //             welcomeWidget != null
        //                 ? welcomeWidget
        //                 : _welcomeWidget(context),
        //           ],
        //         ),
        //       ),
        //       SizedBox(
        //         height: 36.0,
        //       ),
        //       Expanded(
        //         child: Container(
        //           child: child,
        //         ),
        //       ),
        //       Container(
        //         child: bottom,
        //       ),
        //     ],
        //   ),
        // )
      ],
    );
  }

  _getBackgroundColor() {
    // if (blurBackground) {
    //   return BackdropFilter(
    //     filter: ImageFilter.blur(
    //       sigmaY: 24,
    //       sigmaX: 24,
    //     ),
    //     child: Container(color: Colors.black.withAlpha(60)),
    //   );
    // }
    return Container(
      color: Colors.white,
    );
  }

  _getBackground() {
    return Container(
      width: double.infinity,
      child: Image(
        fit: BoxFit.cover,
        image: AssetImage("assets/images/login_bg_1@2x.png"),
        width: double.infinity,
        // height: double.maxFinite,
      ),
    );
  }

  _logoWidget() {
    return Container(
      alignment: Alignment.center,
      child: Image(
        fit: BoxFit.fill,
        image: AssetImage("assets/images/logo_white.png"),
        width: 70.0,
        // height: 70.0,
      ),
    );
  }

  _welcomeWidget(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        S.of(context).welcome,
        style: TextStyle(
          color: Colors.black87,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _subscription =
        KeyboardVisibilityController().onChange.listen((bool visible) {
      print('Keyboard visibility update. Is visible: $visible');
      if (blurBackground != visible) {
        if (mounted) {
          setState(() {
            blurBackground = visible;
          });
        }
        // _formKey.currentState?.save();
        // checkInputCanNext();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _subscription.cancel();
  }

  @override
  void didUpdateWidget(LoginContainer oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

// class LoginContainer extends StatelessWidget {
//   final Widget child;
//   final Widget? welcomeWidget;
//   final Widget? bottom;
//   // final bool blurBackground;
//   const LoginContainer({
//     Key? key,
//     required this.child,
//     this.bottom,
//     this.welcomeWidget,
//     this.blurBackground = false,
//   }) : super(key: key);

 
//   @override
//   Widget build(BuildContext context) {
//     return Stack(
//       children: <Widget>[
//         _getBackground(),
//         VideoBackground(),
//         _getBackgroundColor(),
//         Positioned.fill(
//             child: SingleChildScrollView(
//           child: Column(
//             children: [
//               SizedBox(
//                 height: 45.0,
//               ),
//               _logoWidget(),
//               SizedBox(
//                 height: 10.0,
//               ),
//               welcomeWidget != null ? welcomeWidget : _welcomeWidget(context),
//               SizedBox(
//                 height: 24.0,
//               ),
//               Container(
//                 // color: Colors.red,
//                 // margin: EdgeInsets.only(top: 800),
//                 child: child,
//               ),
//               // Container(
//               //   height: 800,
//               //   color: Colors.red,
//               // ),
//               Container(
//                 child: bottom,
//               ),
//             ],
//           ),
//         )),
//         Positioned(
//           top: ScreenUtil().statusBarHeight + 4,
//           left: 16,
//           child: Container(
//             width: 36,
//             height: 36,
//             alignment: Alignment.center,
//             decoration: BoxDecoration(
//               color: ThemeColor.colorBlack30,
//               shape: BoxShape.circle,
//             ),
//             child: IconButton(
//               icon: Icon(
//                 Icons.arrow_back_ios_new,
//                 color: Colors.white,
//                 size: 16,
//               ),
//               onPressed: ClickUtils.debounce(() {
//                 Navigator.of(context).pop();
//               }),
//             ),
//           ),
//         ),
//         // Container(
//         //   alignment: Alignment.topLeft,
//         //   padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
//         //   child: Column(
//         //     crossAxisAlignment: CrossAxisAlignment.start,
//         //     children: <Widget>[
//         //       Container(
//         //         child: Column(
//         //           children: [
//         //             SizedBox(
//         //               height: 45.0,
//         //             ),
//         //             _logoWidget(),
//         //             SizedBox(
//         //               height: 10.0,
//         //             ),
//         //             welcomeWidget != null
//         //                 ? welcomeWidget
//         //                 : _welcomeWidget(context),
//         //           ],
//         //         ),
//         //       ),
//         //       SizedBox(
//         //         height: 36.0,
//         //       ),
//         //       Expanded(
//         //         child: Container(
//         //           child: child,
//         //         ),
//         //       ),
//         //       Container(
//         //         child: bottom,
//         //       ),
//         //     ],
//         //   ),
//         // )
//       ],
//     );
//   }
// }
